
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./cesium/Cesium1.98/Cesium.js"></script>
    <script src="./latlng.js"></script>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {});
        // 开启帧率
        viewer.scene.debugShowFramesPerSecond = true;
        // 深度监测
        viewer.scene.globe.depthTestAgainstTerrain = true;

        function add() {

            let x = 120.948058;
            let y = 24.826652;
            let z = 2000;
            var position = Cesium.Cartesian3.fromDegrees(x, y, z);
            var heading = Cesium.Math.toRadians(270);
            var pitch = Cesium.Math.toRadians(-120);
            var roll = Cesium.Math.toRadians(180);

            var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
            var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                position,
                hpr
            );

            let entity1 = viewer.entities.add({
                position: position,
                orientation: orientation,
                model: {
                    uri: './models/dd/scene.gltf',
                    scale: 70,
                },
            });
            viewer.scene.postRender.addEventListener(updateRainPositions);

            function updateRainPositions() {
                x = x - 0.01 / 100
                y = y - 0.01 / 100
                z = z - 2100 / 100
                if (z > 0) {
                    entity1.position = Cesium.Cartesian3.fromDegrees(x, y, z);
                } else if (z == 0 || (z < 0 && z > -21)) {
                    addDK(x, y)
                    window.entity.show = 1;
                    viewer.clock.shouldAnimate = true;
                    viewer.clock.clockRange = 1;
                    viewer.clock.multiplier = 0.3
                }
            }

            function addDK(x, y) {
                var position = Cesium.Cartesian3.fromDegrees(x, y, 1);
                let entity = viewer.entities.add({
                    position: position,
                    model: {
                        uri: './models/dk/dankeng.gltf',
                        scale: 1,
                    },
                });
            }
        }

        addBZ();
        function addBZ() {
            //俯视到目的地
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(120.957668, 24.799042, 1625.0),
                orientation: {
                    heading: Cesium.Math.toRadians(316.8),
                    pitch: Cesium.Math.toRadians(-30),
                    roll: Cesium.Math.toRadians(0),
                }
            });
            var position = Cesium.Cartesian3.fromDegrees(
                120.938526, 24.817069, -0.5);
            var heading = Cesium.Math.toRadians(45);
            var pitch = Cesium.Math.toRadians(0);
            var roll = Cesium.Math.toRadians(0);

            var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
            var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                position,
                hpr
            );

            window.entity = viewer.entities.add({
                position: position,
                orientation: orientation,
                model: {
                    uri: './models/bz1/scene.gltf',
                    scale: 0.42,
                },
            });

            setTimeout(() => {
                add()
            }, 20000);
        }

    </script>
</body>

</html>